<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.my_bg {
				background-color: greenyellow;
				color: #ffffff;
			}
		</style>
	</head>

	<body>
		<!--
			
			假设现在从后台接受了一段关于访客的信息数据(添加新的访客信息从info里面按照顺序拿取),请实现问题一.gif的效果.
			
		-->
		<button class="add">添加一条新的访客信息</button>
		<button class="del">删除选中</button>
		<button class="sort">从小到大</button>

		<button class="all_in">一键选中</button>
		<button class="all_no">一键反选</button>
		<button class="sort_on">从大到小</button>

		<table border="1" cellspacing="0" cellpadding="10">
			<tr>
				<th>序列号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
				<th>选择</th>
			</tr>
		</table>
		<script type="text/javascript">
			//			info = [1,2,3,4]

			var info = [{
						name: "胡杭",
						age: 16
					},
					{
						name: "胜明",
						age: 22
					},
					{
						name: "军毅",
						age: 21
					},
					{
						name: "晓华",
						age: 13
					},
					{
						name: "盛聪",
						age: 23
					},
					{
						name: "侦剑",
						age: 32
					},
					{
						name: "红翔",
						age: 25
					},
					{
						name: "超维",
						age: 18
					},
					{
						name: "士琪",
						age: 22
					},
					{
						name: "艳华",
						age: 20
					}
				],
				add = document.querySelector(".add"),
				del = document.querySelector(".del"),
				sort = document.querySelector(".sort"),
				tb = document.querySelector("tbody"),

				all_in = document.querySelector(".all_in"),
				all_no = document.querySelector(".all_no"),
				sort_on = document.querySelector(".sort_on")
			index = 0;

			//
			add.addEventListener("click", function() {
				tb.innerHTML += "<tr><td>" + (index + 1) + "</td><td>" + info[index].name + "</td><td>" + info[index].age + "</td><td><button>删除</button></td><td><input type = 'checkbox'></td></tr>";
				++index >= info.length ? index = 0 : "";
			})

			del.addEventListener("click", function() {
				var checkboxs = document.querySelectorAll("input");
				for(var i = 0; i < checkboxs.length; i++) {
					checkboxs[i].checked ? checkboxs[i].parentNode.parentNode.remove() : "";
				}
			})

			tb.addEventListener("click", function(e) {
				e.target.nodeName == "BUTTON" ? e.target.parentNode.parentNode.remove() : "";
				//e.target.nodeName=="INPUT"?e.target.checked=!e.target.checked		
				if(e.target.nodeName == "INPUT") {
					if(e.target.checked) {
						e.target.parentNode.parentNode.classList.add("my_bg");
					} else {
						e.target.parentNode.parentNode.classList.remove("my_bg");
					}
				}
			})

			sort.addEventListener("click", function() {
				var trs = document.querySelectorAll("tr:not(:first-child)"),
					trs_arr = new Array();
				for(var i = 0; i < trs.length; i++) {
					trs_arr.push(trs[i]);
				}
				trs_arr.sort(function(a, b) {
					return a.cells[2].innerText - b.cells[2].innerText;
				})
				for(var i = 0; i < trs_arr.length; i++) {
					tb.appendChild(trs_arr[i]);
				}
			})

			sort_on.addEventListener("click", function() {
				var trs = document.querySelectorAll("tr:not(:first-child)"),
					trs_arr = new Array();
				for(var i = 0; i < trs.length; i++) {
					trs_arr.push(trs[i]);
				}
				trs_arr.sort(function(a, b) {
					return b.cells[2].innerText - a.cells[2].innerText;
				})
				for(var i = 0; i < trs_arr.length; i++) {
					tb.appendChild(trs_arr[i]);
				}
			})


			all_in.addEventListener("click", function() {
				checked_inps(1);
			})

			function checked_inps(type) {
				var inps = document.querySelectorAll("input");
				switch(type) {
					case 1:
						for(var i = 0; i < inps.length; i++) {
							inps[i].checked = true;
							inps[i].parentNode.parentNode.classList.add("my_bg");
						}
						break;
					case 2:
						//一键反选
						for(var i = 0; i < inps.length; i++) {
							//inps[i].checked = !inps[i].checked;
							if(inps[i].checked) {
								inps[i].checked = false;
								inps[i].parentNode.parentNode.classList.remove("my_bg");
							} else {
								inps[i].checked = true;
								inps[i].parentNode.parentNode.classList.add("my_bg");
							}
						}
						break;
				}
			}

			all_no.addEventListener("click", function() {
				checked_inps(2);
			})
		</script>
	</body>

</html>